<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传测试</title>
</head>
<body>
    <h1>文件上传测试</h1>
    <form id="uploadForm">
        <input type="file" id="fileInput" accept="image/*" required>
        <button type="submit">上传文件</button>
    </form>
    <div id="result"></div>

    <script>
        document.getElementById('uploadForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const fileInput = document.getElementById('fileInput');
            const file = fileInput.files[0];
            
            if (!file) {
                alert('请选择文件');
                return;
            }
            
            const formData = new FormData();
            formData.append('file', file);
            
            try {
                const response = await fetch('/api/file/upload', {
                    method: 'POST',
                    body: formData
                });
                
                const result = await response.json();
                document.getElementById('result').innerHTML = 
                    '<pre>' + JSON.stringify(result, null, 2) + '</pre>';
                
                if (result.success) {
                    // 显示上传的图片
                    const img = document.createElement('img');
                    img.src = '/api' + result.data.url;
                    img.style.maxWidth = '200px';
                    img.style.marginTop = '10px';
                    document.getElementById('result').appendChild(img);
                }
            } catch (error) {
                document.getElementById('result').innerHTML = 
                    '<p style="color: red;">上传失败: ' + error.message + '</p>';
            }
        });
    </script>
</body>
</html> 